<style>
    .drawer-footer {
        z-index: 10;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 1px solid #e8e8e8;
        padding: 10px 10px;
        text-align: right;
        background: #fff;
    }
</style>
<template>
    <span>
    <Button @click="getAuthority" type="warning" size="small">设置权限</Button>
    <Drawer :title="'权限设置-'+role.roleName" :closable="false" placement="right" v-model="showDrawer">
        <div class="drawer-footer">
                <Button @click="selectTreeAll" style="margin-left:3px">全选/反选</Button>
                <Button type="primary" :loading="submitPermLoading" style="margin-left:3px" @click="submitGrantMenu">提交</Button>
          </div>
       <Tree ref="tree" :data="permData" multiple :show-checkbox="showcheckbox" style="padding-top: 30px"></Tree>
        <Spin size="small" v-if="treeLoading"></Spin>
    </Drawer>
    </span>
</template>
<script>
    import {selectAllMenu,grantMenu} from "@/api/index";

    export default {
        name: "seAuthority",
        props: {
            role: Object
        },
        data() {
            return {
                treeLoading: true,
                showcheckbox:true,
                showDrawer: false,
                submitPermLoading: false,
                selectAllFlag: false,
                permData: []
            }
        },
        methods: {
            cancel(){
                this.showDrawer = false;
            },
            //全选反选
            selectTreeAll() {
                this.selectAllFlag = !this.selectAllFlag;
                let select = this.selectAllFlag;
                this.selectedTreeAll(this.permData, select);
            },
            //递归全选节点
            selectedTreeAll(permData, select) {
                let that = this;
                permData.forEach(function (e) {
                    e.checked = select;
                    if (e.children && e.children.length > 0) {
                        that.selectedTreeAll(e.children, select);
                    }
                });
            },
            //加载数据
            getAuthority() {
                this.showDrawer = true;
                let params = {
                    roleId: this.role.id
                };
                selectAllMenu(params).then(res => {
                    this.treeLoading = true;
                    if (res.status === true) {
                        this.permData = res.data;
                        this.treeLoading = false;
                    }
                });
            },
            //提交角色权限
            submitGrantMenu() {
                this.submitPermLoading = true;
                let menuIds =[];
                let checkeddNodes = this.$refs.tree.getCheckedAndIndeterminateNodes();
                checkeddNodes.forEach(function (e) {
                    menuIds.push(e.id);
                });
                grantMenu( {
                    roleId: this.role.id,
                    menuIds:menuIds
                }).then(res => {
                    this.submitPermLoading = false;
                    if (res.status === true) {
                        this.$Message.success("操作成功");
                        this.showDrawer = false;
                    }
                });
            },

        },
        mounted() {

        }
    }
</script>